import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import path, { resolve } from "path";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { createHtmlPlugin } from "vite-plugin-html";
import defineSettings from "./src/config/defaultSettings";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import viteCompression from "vite-plugin-compression";
import vueSetupExtend from "vite-plugin-vue-setup-extend";

import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import vueJsx from "@vitejs/plugin-vue-jsx";

// https://vitejs.dev/config/
export default defineConfig({
  // base: ,
  plugins: [
    vue({
      include: [/\.vue$/, /\.md$/],
      // 可以使用$ref
      reactivityTransform: true,
    }),
    // * vite 可以使用 jsx/tsx 语法
    vueJsx(),
    // name可以写在script上
    vueSetupExtend(),
    AutoImport({
      resolvers: [
        ElementPlusResolver({
          // 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
          importStyle: "sass",
        }),
      ],
      // dts: "src/auto-imports.d.ts",
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
      ],
      vueTemplate: true,
      imports: [
        "vue",
        "vue-router",
        // custom
        {
          // "@vueuse/core": [
          //   // named imports
          //   "useMouse", // import { useMouse } from '@vueuse/core',
          //   // alias
          //   ["useFetch", "useMyFetch"], // import { useFetch as useMyFetch } from '@vueuse/core',
          // ],
          axios: [
            // default imports
            ["default", "axios"], // import { default as axios } from 'axios',
          ],
          // "@vue/reactivity-transform": ["$", "$$"],
        },
      ],
    }),

    Components({
      // allow auto load markdown components under `./src/components/`
      extensions: ["vue", "md"],
      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.tsx$/, /\.vue\?vue/, /\.md$/],
      resolvers: ElementPlusResolver({
        // 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
        importStyle: "sass",
      }),
      // dts: "src/components.d.ts",
    }),
    // 解决message和notification引入不生效问题
    // createStyleImportPlugin({
    //   resolves: [ElementPlusResolve()],
    // }),

    createHtmlPlugin({
      inject: {
        data: {
          title: defineSettings.title,
          description: defineSettings.description,
          version: defineSettings.version,
        },
      },
    }),

    createSvgIconsPlugin({
      // 要缓存的图标文件夹
      iconDirs: [path.resolve(__dirname, "src/assets/img")],
      // 执行 icon name 的格式
      symbolId: "icon-[name]",
    }),
    // 开启gzip压缩
    // viteCompression({
    //   ext: ".gz",
    //   algorithm: "gzip",
    //   deleteOriginFile: true,
    // }),
  ],

  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 全局添加scss
        additionalData: `@use '@/style/theme.scss';@use '@/style/blackTheme.scss';`,
      },
    },
  },

  build: {
    // 浏览器兼容性  “esnext | modules”
    target: "modules",
    outDir: "./dist",
    // 构建后是否生成 sourcemap 文件
    sourcemap: false,
    // 块大小警告大小限制(kb)
    chunkSizeWarningLimit: 1000,
    /** Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效 */
    minify: "terser",
    /** 在打包代码时移除 console.log、debugger 和 注释 */
    terserOptions: {
      //打包后移除console和注释
      compress: {
        drop_console: true,
        drop_debugger: true,
        pure_funcs: ["console.log"],
      },
      format: {
        /** 删除注释 */
        comments: false,
      },
    },

    /** 打包后静态资源目录 */
    assetsDir: "static",
    rollupOptions: {
      output: {
        // 分解大块js,
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
        // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
        entryFileNames: "static/js/[name].[hash].js",
        // 用于命名代码拆分时创建的共享块的输出命名
        chunkFileNames: "static/js/[name].[hash].js",
        // 用于输出静态资源的命名，[ext]表示文件扩展名
        assetFileNames: "static/[ext]/[name].[hash].[ext]",
      },
    },
  },
  server: {
    port: 9270,
    hmr: true,
    proxy: {
      "/api": {
        target: "http://localhost:3111/",
        ws: false,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});
